import React, {useEffect, useState} from "react";
import styles from './index.module.scss';
import icon from './icon.module.scss';
import classnames from 'classnames';
import {IconFont} from '@/components';
import {Drawer, Button} from 'antd';
import {EnumChartsToolbar, IChartCategory, IChartLegend} from "@/pages/dv/constants/EnumHeaderToolbar";
import {EE, lodash} from "@/utils/T";
import {isPlainObject, isArray} from 'lodash';
import {CloseCircleOutlined} from "@ant-design/icons";
import drawTool from "@/pages/dv/drawTool";
import EnumOnFire from "@/pages/dv/constants/EnumOnFire";


/**
 * 头部图表仓库组件
 * @param actions
 * @constructor
 */
export default function ChartsToolBar({...actions}) {

  const [currentTool, setCurTool] = useState('');

  /**
   * 选中工具chart
   */
  const handleSelectChart = ({type}: DV.IChartRoute) => {
    // 关闭toolBox
    setCurTool('');
    drawTool.drawNewChart(type);
  }

  /**
   * 渲染仓库列表
   */
  const renderStore = (storeData: IChartLegend | DV.IChartRoute[], category: string) => {
    return <div className={styles.toolbarDropdown}>
      <div className={styles.storeContainer}>
        {
          isArray(storeData) && <ul
            className={styles.toolList}
          >
            {
              storeData.map((chart: any) => <li
                key={chart.type}
                onClick={() => handleSelectChart(chart)}
              >
                <div className={classnames(styles['tool-icon'], icon[chart.type])}/>
                <span className={styles['tool-title']}>{chart.label}</span>
              </li>)}
          </ul>
        }
        {
          isPlainObject(storeData) && Object.entries(storeData).map(([key, value]) => <ul
            className={styles.toolList}
            key={key}
          >
            {value.showTitle && <li className={styles.tool_title}>{value.title}</li>}
            {Array.isArray(value.data) && value.data.map((chart: any) => <li
              key={chart.type}
              onClick={() => handleSelectChart(chart)}
            >
              <div className={classnames(styles['tool-icon'], icon[chart.type])}/>
              <span className={styles['tool-title']}>{chart.label}</span>
            </li>)}
          </ul>)
        }
      </div>
    </div>
  }

  /**
   * 渲染图表仓库下拉
   * @param categoryItem
   * @param index
   */
  const renderTool = (categoryItem: IChartCategory, index: number) => {
    if (categoryItem.hasOwnProperty('store') && !lodash.isEmpty(categoryItem.store)) {
      return <li
        key={index}
        className={classnames({
          [styles.showDropTool]: currentTool === categoryItem.category
        })}
        onMouseEnter={() => setCurTool(categoryItem.category)}
        onMouseLeave={() => setCurTool('')}
      >
        <IconFont type={categoryItem.icon}/>
        <span>{categoryItem.label}</span>
        {renderStore(categoryItem.store || [], categoryItem.category)}
      </li>
    } else {
      return <li
        key={index}
      >
        <IconFont type={categoryItem.icon}/>
        <span>{categoryItem.label}</span>
      </li>
    }
  }

  return [
    <ul className={classnames(styles.toolbarUl, styles.chartsToolBar)} key={'chartsToolBar'}>
      {
        EnumChartsToolbar.map((category, index) => renderTool(category, index))
      }
    </ul>,
    <DrawingPanel key={'DrawingPanel'}/>
  ]
}

/**
 * 绘画模式 遮掩面板
 * @constructor
 */
export function DrawingPanel({}) {
  const [visible, setVisible] = useState(false);
  const [isDoing, setDoing] = useState(false);

  useEffect(() => {
    // 发起订阅模式
    EE.on(EnumOnFire.drawChart_status, (status: string) => {
      if (status === 'end') {
        setDoing(false);
        setVisible(false);
        return;
      } else if (status === 'doing') {
        !isDoing && setDoing(true);
      } else if (status === 'start') {
        setVisible(true);
        setDoing(false);
      } else if (status === 'pause') {
        setDoing(false);
      }
    });
  }, [])

  /**
   * 终止绘画模式
   */
  const endDrawMode = () => {
    EE.fire(EnumOnFire.drawChart_status, 'end')
  }

  return <Drawer
    visible={visible}
    placement={'top'}
    height={60}
    mask={false}
    closable={false}
    bodyStyle={{
      padding: 0,
      backgroundColor: '#3a3f50',
      color: '#eaebed'
    }}
  >
    <div
      className={styles.drawHeaderBox}
    >
      <dl>
        <dt>请在大屏展示区域绘制组件</dt>
        <dd>{isDoing ? '正在绘制组件...' : '鼠标按下拖拽，松开即绘制完成。(按住shift键可连续绘制组件)'}</dd>
        <dd className={styles.btnActions}>
          <Button
            type={'primary'}
            size={'small'}
            icon={<CloseCircleOutlined/>}
            onClick={endDrawMode}
          >结束绘制</Button>
        </dd>
      </dl>

    </div>
  </Drawer>
}
